<template>
  <view class="content">
    <a-time @click="fullRef.showTime()" style="margin-top: 60rpx"/>
    <a-full-time ref="fullRef"/>
    <image class="logo" :src="logoPath"></image>
    <view style="display: grid;gap: 30rpx;width: 100%;padding: 30rpx;box-sizing: border-box;"
          :style="[{gridTemplateColumns: `repeat(${operArr.length},1fr)`}]">
      <span v-for="item of operArr" :key="item.title">
        <view @click="toPath(item.path)" class="home-oper">
          <image :src="item.icon" style="width: 100rpx;height: 100rpx"/>
          <view class="u-text-center u-f-sxl" style="line-height: 50rpx;color: var(--text-color)">{{
              item.title
            }}
          </view>
        </view>
      </span>
    </view>


  </view>
  <a-menu/>
</template>

<script setup>
import {ref, watch} from "vue";
import {toPath} from "@/util/router/router";
import {useThemeStore} from "@/store/theme";

const fullRef = ref()
const logoPath = ref('/static/logo.png')
const themeStore = useThemeStore()
const operArr = ref([
  {
    title: '商城',
    icon: '/static/icon/common/gouwudai.png',
    path: '/shop/index/index'
  },
  {
    title: '厨房',
    icon: '/static/icon/common/daocha.png',
    path: '/cook/index/index'
  }
])

watch(() => themeStore.currentTheme, (val) => {
  const themeSuffix = val === 'light' ? '' : '-black'
  logoPath.value = `/static/logo${themeSuffix}.png`
}, {immediate: true});


</script>

<style scoped lang="scss">
@import "../../static/css/index.css";

page {
  background: var(--home-bg);
  height: 100%;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 400rpx;
  width: 400rpx;
  margin-top: 100rpx;
  margin-left: auto;
  margin-right: auto;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.home-oper {
  width: 100%;
  height: 300rpx;
  background: var(--bg-color);
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10rpx #ccc;
  margin-bottom: 40rpx;
}

</style>
